<template>
    <div class="add-open-list">
        <!-- 新增弹窗 -->
        <cvue-dialog :dialogVisible="dialogVisible"
            :dialogLoading="dialogLoading"
            title="新增"
            dialogWidth="500px"
            @handleOpen="getDetail"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="handleClose">
            <div class="dialog-body" slot="dialogBody">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="118px" class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="孩子手机号" prop="phone">
                                <el-input v-model.trim="ruleForm.phone" placeholder="请输入手机号" maxlength="11"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="套餐" prop="productId">
                                <el-select @change="choosePrice" placeholder="请选择" v-model="ruleForm.productId" class="select-width">
                                    <el-option v-for="item in saleType" :key="item.productId" :label="item.productName" :value="item.productId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="订购价格(元/月)" prop="price">
                                <el-input v-model="ruleForm.price" placeholder="套餐价格" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-form :rules="rules" ref="" label-width="160px" class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="退订是否需要家长确认" prop="">
                                <el-radio style="margin-left: 50px;" v-model="isCheck" label="1">是</el-radio>
                                <el-radio v-model="isCheck" label="0">否</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import cvueTable from '@/components/cvue-table'
import {validPhone} from '@/util/validator.js'
export default {
    name: 'openListAdd',
    components: {
        cvueDialog,
        cvueTable
    },
    data () {
        var checkPhone = (rule, value, callback) => {
            const reg = /^1[3456789]\d{9}$/
            if (!value) {
                callback(new Error('请输入手机号码'))
            } else if (!reg.test(value)) {
                callback(new Error('请输入正确的11位手机号码'))
            } else {
                var params = {
                    controlledId: value
                }
                this.$store.dispatch('commonUser/CheckPhone', params).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        if (!res.data.exist) {
                            callback()
                        } else {
                            callback(new Error('该手机号已被绑定'))
                        }
                    }
                    // else {
                    //     callback(new Error(res.msg))
                    // }
                })
            }
        }
        return {
            isCheck: '1',
            ruleForm: {
                phone: '',
                productId: '',
                price: ''
            },
            rules: {
                phone: [
                    { required: true, trigger: 'blur', validator: checkPhone }
                ],
                productId: [
                    { required: true, message: '请选择套餐', trigger: 'change' }
                ]
            },
            disabled: true,
            dialogLoading: false,
            saleType: [
            ]
        }
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    mounted () {
        // this.$refs['ruleForm'].clearValidate()
        // this.$refs['ruleForm'].resetFields()
    },
    methods: {
        // 触发事件
        handleClose () {
            this.$refs['ruleForm'].clearValidate()
            this.$refs['ruleForm'].resetFields()
            this.$emit('handleClose')
        },
        closeDialog () {
            this.$refs['ruleForm'].clearValidate()
            this.$refs['ruleForm'].resetFields()
            this.$emit('closeDialog')
        },
        choosePrice (value) {
            console.log(value)
            this.saleType.forEach(item => {
                if (item.productId == value) {
                    this.ruleForm.price = item.monthPrice / 100
                }
            })
        },
        confirmDialog () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    var params = {
                        phone: this.ruleForm.phone,
                        userId: parseInt(this.$route.query.userId),
                        productId: this.ruleForm.productId,
                        isAllowed: parseInt(this.isCheck),
                        inureType: 1,
                        parentPhone: this.$route.query.userName
                    }
                    console.log(params)
                    // return
                    this.dialogLoading = true
                    this.$store.dispatch('commonUser/OpenBusiness', params).then(res => {
                        console.log(res)
                        if (res.code == 200) {
                            this.$message({
                                message: res.msg,
                                duration: 2000,
                                type: 'success'
                            })
                            this.$refs['ruleForm'].clearValidate()
                            this.$refs['ruleForm'].resetFields()
                            this.$emit('confirmDialog')
                        } else {
                            this.$message({
                                message: res.msg,
                                duration: 2000,
                                type: 'error'
                            })
                            this.dialogLoading = false
                        }
                    }).catch(err => {
                        console.log(err)
                        this.dialogLoading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 初始化弹窗
        getDetail () {
            this.isCheck = '1' // 将单选框初始化
            this.dialogLoading = false
            this.ruleForm = {
                phone: '',
                productId: ''
            }
            // this.getProductType()
        },
        // 获取套餐信息
        getProductType () {
            this.$store.dispatch('product/ViewProductData').then(res => {
                if (res.code == 200) {
                    this.saleType = res.data
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.add-open-list{
    .select-width{
        width: 100%;
    }
}
</style>
